<template>
	<div class="manage">
		<!-- Main Wrapper -->
		<div class="main-wrapper">
			<Header />
			<SideBar />
			<!-- Page Wrapper -->
			<div class="page-wrapper">
				<!-- :is="currentView" -->
				<div class="content container-fluid">
					<BreadCrumb />
					
					<h2>个人信息</h2>
					用户编号(Tno/Sno)：{{user_no}}
					<br>

					用户姓名：<el-input v-model="user_name" placeholder="请输入内容" class="account"></el-input>
					<br>

					用户性别：
					<el-select v-model="user_sex" placeholder="请选择">
						<el-option
						v-for="item in sex_options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
					<br>

					用户身份证号：{{user_card}}
					<br>

					最近所住的省市区：
					<el-cascader v-model="pcachoice"
					:options="pca"
					class="provinceToArea"
					clearable></el-cascader>
					<br>

					最近所住的街道：<el-input v-model="user_recent_t" placeholder="请输入内容" class="account"></el-input>
					<br>

					用户邮箱：{{user_mail}}
					<br>

					<el-button type="primary" @click="update_userinfo">点击按钮更新上边的信息到DB</el-button>
					<hr>
					<h2>修改密码</h2>
					<el-button type="primary" @click="changeVisible">修改密码</el-button>
					
					<el-dialog
						title="修改密码"
						:visible.sync="dialogVisible"
						width="40%">
						旧密码：<el-input type="password" v-model="old_pasw" placeholder="请输入旧密码" class="account"
						show-password clearable></el-input><br>
						新密码：<el-input type="password" v-model="new_pasw" placeholder="请输入新密码" class="account"
						show-password clearable></el-input><br>
						确认新密码：<el-input type="password" v-model="confirm_cipher_code" placeholder="请确认新密码" class="account"
						show-password clearable></el-input><br>
						<el-button type="primary" @click="update_user_paswd">点击更新个人密码</el-button>
					</el-dialog>

				</div>
			</div>

			<!-- /Page Wrapper -->
		</div>
	</div>
</template>

<script>
	import BreadCrumb from '@/components/Breadcrumb'
	import Header from '@/components/Header'
	import SideBar from '@/components/SideBar'

	export default {
		created(){
			this.getProvinceToAreaJSON()
			this.queryUserInfo()
		},
		beforeDestroy(){
		},
		mounted() {},
		data() {
			return {
				pcachoice: [], // 省市区code可改
				pca: [],
				sex_options: [
					{
						label: '保密',
						value: 0
					},
					{
						label: '男',
						value: 1
					},
					{
						label: '女',
						value: 2
					},
				],
				// 个人信息
				user_no: '',
				user_name: '',  // 可改
				user_sex: '',  // 可改
				user_card: '',
				user_recent_t: '',  // 可改
				user_mail: '',
				// 修改密码
				old_pasw: '',
				new_pasw: '',
				confirm_cipher_code: '',
				// 修改密码弹窗可视化
				dialogVisible: false,
			}
		},
		methods: {
			getProvinceToAreaJSON(){
				let config = {
					method: 'get',
					url: 'edu/common/pca'
				};
				this.$http(config)
				.then((response)=>{
					if (response.data.statusCode == 1){
						this.pca = response.data.pca
					}else{
						this.$message.warning("暂无数据");
					}
				}).catch(error => {
					this.$message.error("query failed, please try again later.");
					console.log(error)
				});
			}, //queryBalance()  End
			// 查询个人信息接口
			queryUserInfo() {
				let config = {
					method: 'post',
					url: 'edu/common/user_info',
					headers: {
						"Content-Type": "application/json;"
					},
					data: {
						user_id: localStorage.getItem('userId'),
						user_type: localStorage.getItem('userType')
					}
				};
				this.$http(config)
				.then((response)=>{
					if (response.data.statusCode == 1){
						// 渲染
						this.user_no = response.data.userinfo.user_no
						this.user_name = response.data.userinfo.user_name
						this.user_sex = response.data.userinfo.user_sex
						this.user_card = response.data.userinfo.user_card
						this.user_recent_t = response.data.userinfo.user_recent_t
						this.user_mail = response.data.userinfo.user_mail
						// 将用户的省市区数据填充到下拉框
						var arr = []
						arr.push(response.data.userinfo.user_recent_p)
						arr.push(response.data.userinfo.user_recent_c)
						arr.push(response.data.userinfo.user_recent_a)
						this.pcachoice = arr
					}else{
						this.$message.warning(response.data.msg);
					}
				}).catch(error => {
					this.$message.error("query failed, please try again later.");
					console.log(error)
				});
			},
			// 修改个人信息
			update_userinfo(){
				let config = {
					method: 'put',
					url: 'edu/common/user_info',
					headers: {
						"Content-Type": "application/json;"
					},
					data: {
						user_id: localStorage.getItem('userId'),
						user_type: localStorage.getItem('userType'),
						recent_province: this.pcachoice[0]==null?'':this.pcachoice[0],
						recent_city: this.pcachoice[1]==null?'':this.pcachoice[1],
						recent_area: this.pcachoice[2]==null?'':this.pcachoice[2],
						recent_street: this.user_recent_t,
						user_name: this.user_name,
						user_sex: this.user_sex
					}
				};
				this.$http(config)
				.then((response)=>{
					if (response.data.statusCode == 1){
						this.$message.success(response.data.msg);
					}else{
						this.$message.warning(response.data.msg);
					}
				}).catch(error => {
					this.$message.error("query failed, please try again later.");
					console.log(error)
				});
			},
			// 修改密码
			update_user_paswd(){
				// 首先确定新改密码不为空
				if ( this.old_pasw == '' || this.new_pasw == '' || this.confirm_cipher_code == ''){
					this.$message.warning("请先输入密码");
					return;
				}
				// 然后check if is the new password entered twice consistent
				if ( this.new_pasw != this.confirm_cipher_code ){
					this.$message.warning("两次输入的新密码不一致");
					return;
				}
				// 再次则使用正则表达式验证新密码格式
				/*
				^	行头
				(?![a-zA-Z]+$)	与倒数第二个条件不同，这是排除，可多个并联。该处指不能所有字符从行头到行尾只使用字母
				(?![a-zA-Z\\W]+$)	不能所有字符从行头到行尾只使用字母和特殊字符而不使用数字
				[0-9A-Za-z\\W]	倒数第二个条件，必须包含"数字+字母+特殊字符(即\\W)"这样的组合
				{6,16}	字符串长度(半角),闭区间数[6,16]
				$	行尾
				举例：“^(?![a-zA-Z]+$)(?![a-zA-Z\\W]+$)[0-9A-Za-z]{6,16}$”
				*/
				var pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)(?![0-9A-Za-z]+$)(?![!@#$%^&*()<>?]+$)[0-9A-Za-z!@#$%^&*()<>?]{6,16}$/;
				if( ! pattern.test(this.new_pasw) ){
					this.$message.warning("新密码应为(数字+字母+符号)的组合，长度6—16位");
					return;
				}
				// 两次输入的新密码一致，将进入密码修改逻辑
				let config = {
					method: 'put',
					url: 'edu/common/user_pass',
					headers: {
						"Content-Type": "application/json;"
					},
					data: {
						user_id: localStorage.getItem('userId'),
						user_type: localStorage.getItem('userType'),
						old_pass: this.$md5(this.old_pasw),
						new_pass: this.$md5(this.new_pasw)
					}
				};
				this.$http(config)
				.then((response)=>{
					if (response.data.statusCode == 1){
						this.$message.success(response.data.msg);
					}else{
						this.$message.warning(response.data.msg);
					}
				}).catch(error => {
					this.$message.error("query failed, please try again later.");
					console.log(error)
				});
			},
			// 修改密码  widget pop up
			changeVisible(){
				this.dialogVisible = true
			}
		},
		components: {
			BreadCrumb,
			Header,
			SideBar
		}
	}
</script>
<style>
	/* .manage /deep/.el-input__inner {
		border: 1px solid #C2C2C2;
	}

	.manage /deep/.el-table thead {
		color: #030709;
	}

	.xtes {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.xtesbox {
		float: right;
		padding-right: 150px;
	}

	.kmbox /deep/.el-dialog__body {
		padding: 0 20px 50px 20px;
		color: #606266;
		font-size: 14px;
		word-break: break-all;
	}

	.kulist {
		border-bottom: 1px solid #ccc;
		text-align: center;
		margin: 0 60px 10px 60px;
	}

	.huosi {
		width: 100%;
		height: 100px;
		overflow-y: auto;
		text-align: center;
	}

	.el-table th>.cell {
		padding-right: 0;
		padding-left: 0;
	}

	
	.bjl {
		border: 1px solid #555555;
		padding: 4px 5px;
		margin-right: 4px;
		color: #000000;
	}

	.el-button--primary {
		background-color: #009688;
		border: 1px solid #009688;
	}

	.manage /deep/.el-button--primary:hover {
		background-color: #33ABA0;
	}

	.el-button+.el-button {
		margin-left: 0px;
	}



		.systems {
			border-radius: 15px;
			margin-bottom: 0;
		}

		a {
			text-decoration: none;
		}

		.router-link-active {
			text-decoration: none;
		}

		.navapp {
			width: 100%;
			height: 40px;
			color: #666666;
			background-color: #f2f2f2;
			border: 1px solid #f2f2f2;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
		}
	

	.el-menu-item {
		text-align: center;
		color: #999999;
	}

	.el-header {
		border-radius: 0;
		color: #333;
		line-height: 45px;
		padding: 0;
		background-color: #fff;
		border-bottom: 1px solid #ccc;
	}

	.manage .el-aside {
		color: #333;
		overflow: hidden;
	}

	.el-button--primary.is-disabled {
		background-color: #ccc;
		border: 1px solid #ccc;
	}

	.manage .batch {
		margin-left: 20px;
	}

	.ends {
		margin-bottom: 20px;

	} */
	.account{
		width: 200px;
		height: 35px;
		margin-bottom: 20px;
		padding-left: 10px;
	}
	.provinceToArea{
		min-width: 300px;
	}
</style>
